<div id ="top">
    <form class="form-horizontal">
        <fieldset>
        </fieldset>
    </form>
</div>

<script>
    window.onload = function(){
        var url = "/"+"<%=user.mail%>" + "/statistic/"+"<%=ccd._id%>";
        $.ajax({
            url: url,
            type: 'post',
            dataType: 'json',
            async: true,
            success: function(doc){
                static = doc;
                $("#top").find("fieldset").children().remove();
                for(var key in static){
                    $("#top").find("fieldset").append(getHtml.lv1(key,static[key]));
                }
            }
        });
    };

    getHtml = {
        lv1 : function(name,sub){
            var subHtml = "";
            for(var key in sub){
                subHtml = subHtml + '<div class="control-group" style="margin-bottom: 10px">' +
                        '<label class="control-label"><strong> Cited Times ' + key + ' : </strong></label>' +
                        '<div class="controls" >' +
                        '<p style="margin:5px 0 0 0">'+ sub[key] +'</p>' +
                        '</div></div>'
            }
            var html = "<div id ="+name+">" +
                    '<legend style="background-color: #f5f5f5;margin-bottom: 10px">'+ name +'</legend>' +
                    '<div class="row-fluid" style="margin-bottom: 5px">' +
                    subHtml +
                    '</div>' +
                    "</div>" ;
            return html;
        }
    }



</script>
